/*
 * 
 * Y.on("ParticipantBadgeView.viewProfile", function(participantModel){Y.log("view profile button clicked " + participantModel.get("GUID"))});
		Y.on("ParticipantBadgeView.addToMessenger", function(participantModel){Y.log("add to messenger button clicked " + participantModel.get("GUID"))});
		Y.on("ParticipantBadgeView.ignoreUser", function(participantModel){Y.log("ignore user button clicked " + participantModel.get("GUID"))});
		Y.on("ParticipantBadgeView.reportAbuse", function(participantModel){Y.log("report abuse button clicked " + participantModel.get("GUID"))});
		Y.on("ParticipantBadgeView.tempRemoveUser", function(participantModel){Y.log("temp remove user button clicked " + participantModel.get("GUID"))});
		Y.on("ParticipantBadgeView.permRemoveUser", function(participantModel){Y.log("perm remove user button clicked " + participantModel.get("GUID"))});
		  
 */

YUI.add("participantBadgeView", function(Y) {
    ParticipantEvent = Y.ParticipantEvent;
	function ParticipantBadgeView(config) {
		ParticipantBadgeView.superclass.constructor.apply(this, arguments);
		 
	}

	ParticipantBadgeView.NAME = "participantBadgeView";

	ParticipantBadgeView.ATTRS = { 
		 participantModel : {
            value: null
        }
	}
	
	Y.extend(ParticipantBadgeView, Y.Base, {
		
	    initializer : function(config) { 
	          
			this._container = config.container; 
			this._eventHandles = { 
                contentReady: null,
                mouseClick:null
	    	 };
	    	 
			var html = '<table border="0" cellspacing="0" cellpadding="0" ><tr valign="TOP" style="height:100%"><td ><td>';
			html += '<div style="background-color:#fff ;border: solid 0 #c8d5e9; border-width:1px;">';  
			html += '<div id="participant-card-panel" class="participant-card-panel"> ';
			html += '<table border="0" cellspacing="0" cellpadding="0"><tr valign="TOP" ><td> ';
			html += '			<img id="card-avatar" class="card-avatar" /></td><td >';
			html += '			<div  id="card-main-panel" class="card-main-panel"><table border="0" cellspacing="0" cellpadding="0"><tr><td>';
			html += '				<div id="card-display-name"  class="card-display-name" /></td><td>';
			html += '				<div id="card-pro-mod" /></td></tr></table>';
			html += '				<div id="card-user-info"   class="card-user-info" ></div> ';
			html += '				<hr id="card-user-info-hr">';
			html += '				<table border="0" cellspacing="0" cellpadding="0"><tr valign="TOP" >';
			html += '					<td id="view-profile-icon" class="view-profile-icon" ></td><td><div id="view-profile" class="card-link" >View profile</div></td></tr><tr>';
			html += '					<td id="add-to-messenger-icon" class="add-to-messenger-icon on"></td><td><div id="add-to-messenger"  class="card-link" >Add to messenger</div></td></tr><tr>';
			html += '					<td id="ignore-user-icon" class="ignore-user-icon"/><td><div id="ignore-user"  class="card-link" >Ignore user</div></td></tr><tr>';
			html += '					<td id="report-abuse-icon" class="report-abuse-icon"/><td><div id="report-abuse"  class="card-link" >Report abuse</div></td></tr><tr>'; 
			html += '				</table>';
			html += '			</div></td></tr>';
			html += '</table> '; 
			html += 	'<hr id="moderator-hr">';
			html += '	<div id="moderator-div" ><table border="0" cellspacing="0" cellpadding="0"><tr valign="TOP" >';
			html += '		<td  ><div class="gray-square" /></td><td><div id="temp-remove"  class="card-link orange" >Temporarely remove user from room</div></td><td><div class="info" /></td></tr><tr>';
			html += '		<td  ><div class="gray-square" /></td><td><div id="ban-permanently"  class="card-link red" >Permanently ban user from room</div></td><div class="info"/></td></tr></table>';
			html += '	</div>';
			html += '</div> ';
			html += '</div></td><td >';
			html += '<table border="0" cellspacing="0" cellpadding="0" ><tr><td>';
			html += '	<div style="height:50px; " /></td></tr><tr><td>';
			html += '	<div id="popup-arrow" ></div></td></tr> ';
			html += '</table></td></tr></table>';
			
			this._container.set("innerHTML", html);		
			this._addHandles();
		}, 
	 
	    // Tasks MyClass needs to perform during  
	    // the destroy() lifecycle phase 
	    destructor : function() { 
	        Y.Event.purgeElement(this._wrapper); 
	        this._wrapper.get("parentNode").removeChild(this._wrapper); 
	        this._wrapper = null; 
	    } ,
	    /*****************************************************************/
		/************** THIS METHOD RENDERS THE WIDGET *******************/
		/*****************************************************************/
		_onPopupContentReady : function(participantModel)
		{  
			this.set("participantModel", participantModel); 
			
			//set display name
			Y.get('#card-display-name').set("innerHTML", participantModel.get("nickname") );
			var userInfo =   participantModel.get("age") +" - " + participantModel.get("sex")+" - "+ participantModel.get("location");
			Y.get('#card-user-info').set("innerHTML", userInfo );  
			
			var avatarImage = document.getElementById("card-avatar"); 
			avatarImage.src = participantModel.get("bigAvatarUrl");
			//Y.log( participantModel.get("bigAvatarUrl"))
		},
		
		_clearHandles : function() {
            var eventHandles = this._eventHandles;
            if(eventHandles.contentReady)
            {
            	eventHandles.contentReady.detach();
            	eventHandles.contentReady = null;
            }
            if(eventHandles.mouseClick)
            {
            	eventHandles.mouseClick.detach();
            	eventHandles.mouseClick = null;
            }
		},
		
		_addHandles : function() {
			this._eventHandles.contentReady = Y.on(ParticipantEvent.List.POPUP_CONTENT_READY, Y.bind(this._onPopupContentReady, this));
			
			var that = this;
	     		//that._eventHandles.mouseClick = Y.on("click", that._onMouseClick, "#participant-card-panel");
	     	var domReady = Y.on("domready", function() {  
	     		that._eventHandles.mouseClick = Y.on("click", Y.bind(that._onMouseClick, that), "#participant-card-panel");
	     		domReady.detach();
	     		domReady = null;
	     	}); 
		},
		_onMouseClick : function(e)
		{ 
			var id = e.target.get('id');
			if(id == "view-profile-icon" || id == "view-profile" )
				Y.fire("ParticipantBadgeView.viewProfile", this.get("participantModel"));
			else if(id == "add-to-messenger-icon" || id == "add-to-messenger")
				Y.fire("ParticipantBadgeView.addToMessenger", this.get("participantModel"));
			else if(id == "ignore-user-icon" || id == "ignore-user")
				Y.fire("ParticipantBadgeView.ignoreUser", this.get("participantModel"));
			else if(id == "report-abuse-icon" || id == "report-abuse")
				Y.fire("ParticipantBadgeView.reportAbuse", this.get("participantModel"));
			else if(id == "temp-remove" )
				Y.fire("ParticipantBadgeView.tempRemoveUser", this.get("participantModel"));
			else if(id == "ban-permanently" )
				Y.fire("ParticipantBadgeView.permRemoveUser", this.get("participantModel"));
		}		
	});
            
	Y.ParticipantBadgeView = ParticipantBadgeView;
		
	} , 0.1);